<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- <Header :addItem="addItem"></Header> -->
         <Header @addItem="addItem"></Header>
        <!-- 父组件给子组件传递props数据 -->
        <Main
          :todos="todos"
          :changeDone="changeDone"
          :removeItem="removeItem"
        ></Main>
        <Footer
          :todosLength="todosLength"
          :todoIsDone="todoIsDone"
          :updateTodoDone="updateTodoDone"
          :removeDoneIsTrue="removeDoneIsTrue"
        ></Footer>
      </div>
    </div>
  </div>
</template>

<script>
//局部组件使用：分为三步，引入、注册、使用
//@是src文件夹的别名：如果项目大,找文件关系好找
import Header from "@/components/Header";
import Footer from "./components/Footer";
import Main from "@/components/Main";
export default {
  name: "",
  //组件的响应式数据一定是函数
  data() {
    return {
      todos: JSON.parse(localStorage.getItem('todos'))||[
        { id: 1, title: "吃饭", done: false },
        { id: 2, title: "睡觉", done: false },
        { id: 3, title: "打豆豆", done: false },
      ],
    };
  },
  components: {
    Header,
    Footer,
    Main,
  },
  //App根组件的方法
  methods: {
    //修改状态的方法
    changeDone(id, done) {
      //App根组件：利用自己的方法，修改自己的数据！！！！
      //最后底线：for循环
      //第一种写法:
      // for(var i = 0 ; i < this.todos.length;i++){
      //      if(this.todos[i].id==id){
      //         //修改选中的那个状态
      //         this.todos[i].done =done;
      //      }
      // }

      //第二种写法:
      //map数组的方法:删F改M
      // this.todos = this.todos.map((item) => {
      //   //判断
      //   if (item.id == id) {
      //     return {
      //       ...item,
      //       done,
      //     };
      //   }
      //    return item;
      // });

      //简写
      this.todos = this.todos.map((item) =>
        item.id == id ? { ...item, done } : item
      );
    },
    //删除某一个事件的方法
    removeItem(id) {
      //需要重新给todos进行赋值：过滤之后的新的数组
      this.todos = this.todos.filter((item) => {
        //如果ID相同:不要，不同的id：需要的
        return item.id == id ? false : true;
      });
    },
    //添加一个新的事件
    addItem(newObj) {
      //新增的事件：需要判断的才能添加
      //不合理的:空
      if (newObj.title.trim() == "") return;
      //循环语句
      for (var i = 0; i < this.todos.length; i++) {
        if (this.todos[i].title === newObj.title) {
          return;
        }
      }
      this.todos.push(newObj);
    },
    //修改全部事件的done状态
    updateTodoDone(done) {
      //修改全部的事件的状态
      //当然这里可以用for循环...
      this.todos = this.todos.map((item) => {
        return { ...item, done };
      });
    },
    //删除已经完成的事件
    removeDoneIsTrue() {
      //如果done为真 不要  如果done为假的 要
      this.todos = this.todos.filter(item=>{
           return !item.done;
      })
    },
  },
  //计算属性
  computed: {
    //数组的总个数:全部事件个数
    todosLength() {
      return this.todos.length;
    },
    //已经完成的事件个数
    todoIsDone() {
      //过滤出todo它的done属性值为真的
      return this.todos.filter((item) => item.done).length;
    },
  },
  watch: {
    todos(){
      //本地存储：字符串，但是引用类型--->转换为字符换
      localStorage.setItem('todos',JSON.stringify(this.todos));
    }
  }
};
</script>

<style scoped>
</style>
